<template>
  <div class="box">
    <header class="headerdetail">
      <transition name="fade">
        <van-nav-bar
        v-if="top < 50"
        @click-left="$router.back()"
        @click-right.stop="rightNav">
          <template #left>
            <van-icon name="arrow-left" size="20" />
          </template>
          <template #right>
            <van-icon name="ellipsis" size="24" />
          </template>
        </van-nav-bar>
      </transition>
      <transition name="fade">
        <van-nav-bar
        v-if="top >= 50"
        class="scrollNav"
        @click-left="$router.back()"
        @click-right.stop="rightNav">
          <template #left>
            <van-icon name="arrow-left" size="20" />
          </template>
          <template #title>
            <p :class="top<=300 ? 'active' : ''" @click="to(1)">商品</p>
            <p :class="top>300&&top<=600 ? 'active' : ''" @click="to(2)">评价</p>
            <p :class="top>600&&top<=900 ? 'active' : ''" @click="to(3)">详情</p>
            <p :class="top>900 ? 'active' : ''" @click="to(4)">推荐</p>
          </template>
          <template #right>
            <van-icon name="ellipsis" size="24" />
          </template>
        </van-nav-bar>
      </transition>
    </header>
    <ul class="rightnav" v-show="show">
      <li @click="$router.push('/index')">
        <van-icon name="wap-home-o" />
        <span>首页</span>
      </li>
      <li @click="$router.push('/my')">
        <van-icon name="user-o" />
        <span>我的</span>
      </li>
      <li @click="showShare = true">
        <van-icon name="share-o" />
        <span>分享</span>
      </li>
    </ul>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
    <div class="proCont" ref="cont">
      <!-- 添加详情页轮播图，并添加大图预览功能的点击事件 -->
      <van-swipe class="my-swipe" indicator-color="white">
        <van-swipe-item v-for="(item,index) in proImg" :key="index" @click="proview(index)">
          <van-image width="100%" height="4rem" fit= "cover" :src="item" />
        </van-swipe-item>
      </van-swipe>
      <div class="proInfo">
        <!-- 解析数据 -->
        <div class="L11">
          <span class="L22">￥：{{parseInt(prodata.price*prodata.discount/10)}}</span>
          <em>{{prodata.price}}</em>
          <span class="L33">{{prodata.discount}}折</span>
        </div>
        <h3><span class="L99">{{prodata.column}}</span>:{{prodata.proName}}</h3>
        <br>
        <p class="intro L55"><span class="L99">详情:</span>{{prodata.introduce}}</p>
        <br>
        <p></p>       
        <p class="L77"><span class="L99">评分:</span>{{prodata.score}}</p>
        <br>
        <div class="L00">
          <img :src="prodata.logo" class="L88"/>
          <span class="L44">{{prodata.brand}}</span>
        </div> 
      </div>
    </div>
    <!-- 详情底部组件 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/cart')" />
      <van-goods-action-button type="warning" text="加入购物车" @click="addCart" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Image as VanImage, ImagePreview, GoodsAction, GoodsActionIcon, GoodsActionButton, NavBar, Icon, ShareSheet, Toast } from 'vant'
import { getDetail, addCart, getSoucang, addSoucang, delSoucang } from '../../api/index'
import $ from '../../tools/jquery.2.2.4.js'

Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(VanImage)
Vue.use(ImagePreview)
Vue.use(GoodsAction)
Vue.use(GoodsActionIcon)
Vue.use(GoodsActionButton)
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(ShareSheet)
Vue.use(Toast)

export default {
  data () {
    return {
      prodata: {},
      proImg: [],
      top: 0,
      show: false,
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ],
      isStar: false
    }
  },
  mounted () {
    // js中$route前要加this，根据id请求数据库数据
    getDetail({ id: this.$route.params.id }).then((res) => {
      this.prodata = res.data.data[0]
      this.proImg = [this.prodata.mainImg, this.prodata.proImg1, this.prodata.proImg2]
    })
    this.$refs.cont.addEventListener('scroll', () => {
      this.top = this.$refs.cont.scrollTop
    })
    document.addEventListener('click', () => {
      this.show = false
    })
  },
  methods: {
    // 在方法中添加大图预览的事件，并执行大图预览的方法
    proview (idx) {
      ImagePreview({
        images: this.proImg,
        startPosition: idx
      })
    },
    addCart () {
      // 前端判断是否登录
      if (localStorage.getItem('isLogin') === 'ok') {
        addCart({
          userId: localStorage.getItem('userId'),
          proId: this.$route.params.id
        }).then((res) => {
          console.log(res.data)
        })
      } else {
        this.$router.push('/login')
      }
    },
    rightNav () {
      this.show = !this.show
    },
    to (i) {
      if (i === 1) {
        $('.proCont').animate({
          scrollTop: 0
        })
      } else if (i === 2) {
        $('.proCont').animate({
          scrollTop: 301
        })
      } else if (i === 3) {
        $('.proCont').animate({
          scrollTop: 601
        })
      } else {
        $('.proCont').animate({
          scrollTop: 901
        })
      }
    },
    onSelect (option) {
      Toast(option.name)
      this.showShare = false
    },
  }
}
</script>

<style lang="scss">
.box{
  display: flex;
  .headerdetail{
    height: 0.46rem;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    .van-nav-bar{
      background-color: transparent;
      left: 0px;
      top: 0px;
      &::after{
      border:none;
      }
      .van-nav-bar__right{
        background: #333;
        padding: 10px;
        border-radius:50%;
        opacity: 0.8;
        margin-top: 10px;
        margin-right: 10px;
      }
      .van-nav-bar__left{
        background: #333;
        padding: 10px;
        border-radius:50%;
        opacity: 0.8;
        margin-top: 10px;
        margin-left: 10px;
      }
      .van-icon{
        color: #fff;
      }
    }
    .van-nav-bar.scrollNav{
      background-color: #fff;
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      border-bottom: 1px solid #aaaaaa;
      .van-nav-bar__right{
        background: none;
        padding: 10px;
        margin: 0px;
      }
      .van-nav-bar__left{
        background: none;
        padding: 10px;
        margin: 0px;
      }
      .van-icon{
        color: #333;
      }
      .van-nav-bar__title{
        width: 100%;
        display: flex;
        justify-content: space-around;
        p{
          margin: 0px;
          flex: 1;
          &.active{
            border-bottom: 4px solid red;
          }
        }
      }
    }
  }
  .rightnav{
    position: absolute;
    top: 0.5rem;
    right: 10px;
    background:black;
    opacity: 0.9;
    color: #fff;
    list-style: none;
    margin: 0px;
    padding: 0 0.1rem;
    width: 0.7rem;
    z-index: 2;
    li{
      margin: 0.1rem 0;
      text-align: left;
      border-bottom: 1px solid #efefef;
      .van-icon{
        color: #fff;
      }
      span{
        display: inline-block;
        text-indent: 15px;
      }
    }
  }
  .proCont{
    flex: 1;
    overflow: auto;
    .proInfo{
      padding: 0px 0.1rem 0.4rem;
      .intro{
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
      }
    }
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity 2s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
}
.L11{
    position: relative;
    left: -0.1rem;
    width: 110%;
    height: 0.6rem;
    line-height: 0.6rem;
    background-image:  url(https://h2.appsimg.com/b.appsimg.com/upload/mst/2020/10/28/5/62eafe85acfb5aa0e04f4fd35acfcce0_1125x222_90.jpg);
    .L22,.L33{
      margin-left: 0.1rem;
      color: white;
      font-size: 0.2rem;
    }
    em{
      font-size: 0.1rem;
      margin-left: 0.1rem;
      color: white;
      text-decoration:line-through;
    }
    .L33{
      font-size: 0.15rem;
    }
    
}
.L88{
      width: 0.6rem;
      margin-top: 0.2rem;
      margin-right: 0.2rem;
}
.L55,.L77,.L44{
  font-size: 0.2rem;
}
.L00{
  height: 0.6rem;
  line-height: 0.6rem;
}
.proInfo{
  h3{
    word-break: break-all;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}
.L99{
  font-weight: 700;
  color: red;
}
</style>
